<!-- 积分游戏 -->
<template>
	<view class="game">
		
		<view class="nav x-f tc" :style="{paddingTop: `${statusBarHeight + 10}`  + 'px'}" @tap="back">
			<u-icon @tap="back" name="arrow-leftward" color="#FFF" size="30"></u-icon>
			<view class="right pa" >
				积分游戏
			</view>
            
		</view>
		
		<view class="content pa">
			<view class="menu x-bc">
				<view class="left x-f" @tap.stop="jumpGame(rule_url)">
					<image :src="rule_img" mode=""></image>
					<view class="title">游戏规则</view>
				</view>
				
				<view class="right x-f" @tap="jumpGame(recode_url)">
					<image :src="recode" mode=""></image>
					<view class="title">游戏记录</view>
				</view>
			</view>
			<view class="banner" v-for="(item, index) in banner" :key="index" @tap="jump(item.url, item.key)">
				<image :src="item.img"></image>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusBarHeight: 0, 									//状态栏高度
				screenWidth: 0,											//屏幕宽度
				recode: this.imgUrl + 'save.png',
				rule_img: this.imgUrl + 'rule_img.png',
				recode_url: '/pages/activity/recode/index',				//中奖记录页面路径
				rule_url: '/pages/activity/rule/index',                 // 游戏规则页面路径
				banner: [{
					key: 'ggl',
					name: '刮刮乐',
					img: this.imgUrl + 'games-2.png',
					url: "/pages/activity/guaguale/index"
				},{
					key: 'yyy',
					name: '摇一摇',
					img: this.imgUrl + 'games-3.png',
					url: "/pages/activity/shake/index"
				},{
					key: 'dzp',
					name: '大转盘',
					img: this.imgUrl + 'games-1.png',
					url: "/pages/activity/turntable/index"
				},
				{
					key: 'zjd',
					name: '砸金蛋',
					img: this.imgUrl + 'games-4.png',
					url: "/pages/activity/goldenEggs/index"
				}],
				
				
				game: [{
					title: '限时福利',
					desc: '30积分赢大奖',
					img: '/static/image/game-5.png'
				},{
					title: '新用户福利',
					desc: '欢迎到来，福利送上',
					img: '/static/image/game-3.png'
				},{
					title: '限时福利',
					desc: '30积分赢大奖',
					img: '/static/image/game-4.png'
				},{
					title: '新用户福利',
					desc: '欢迎到来，福利送上',
					img: '/static/image/game-3.png'
				}]
			};
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.$api('game.list').then( res => {
				let arr = res;
				this.$store.dispatch('member/get_game', arr.data)
			})
		},
		methods: {
			jump(url, key) {
				this.$store.dispatch('game/get_gameDetail',key)
                this.$Router.push({
                    path: url
                })
                if (key != undefined) {
                    this.$store.dispatch('game/get_key', key);
                }
			},
			jumpGame(url, key) {
                this.$Router.push({
                    path: url
                })
			},
            back() {
                this.$Router.back(1)
            }
		}
	};
</script>

<style scoped lang="scss">
@import  './index.scss';
</style>
<style>
page {
	background: url(https://mystore-1304299581.cos.ap-guangzhou.myqcloud.com/static/image/game_indexBg.png) no-repeat;
	background-size: 100% 483rpx;
}
</style>